<script setup lang="tsx">
import { onBeforeMount, reactive, ref } from 'vue'
import JmpTimeRange from '@/components/time-range' //顶部时间
import Map from './components/map/mapView.vue' //地图
import Bar from './components/bar-chart.vue' //省份柱状图
import devPie from './components/dev-pie.vue' //设备类型-chart
import productPie from './components/product-pie.vue' //产品类型-chart
import portBar from './components/port-bar.vue' //端口类型-chart
import serviceBar from './components/service-bar.vue' //服务类型-chart
import loopList from './components/loop-list.vue' //资产分析

import looplistdetails from './components/loop-list-details.vue'
import { getAssetOptionAPI } from '@/api/asset/index'
import { HttpCodeEnum } from '@packages/share/enums'
import TimeSelect from './utilView/TimeSelect.vue'
const ruleForm = reactive({
  creatBeginTime: '',
  createEndTime: '',
  topic: 'ALL'
})
const country = ref()
const province = ref()
// 详细页抽屉显示状态
const drawer = ref(false)
// 详细显示目标
const LoopValue = reactive({
  _item: {}
})

// Map:国家
const handleUpdate = (value: string) => {
  country.value = value
}
// Bar:省份
const handListupdata = (value: string) => {
  province.value = value
}

// 专题下拉选项
let assetOption = ref([])
// 获取专题列表
const getAssetOption = () => {
  getAssetOptionAPI().then((res) => {
    let { data, code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      assetOption.value = data
    }
  })
}
// 详细点击事件
const DetailItem = (item: object) => {
  drawer.value = true
  LoopValue._item = item
}
onBeforeMount(() => {
  getAssetOption()
})
</script>
<template>
  <div class="jm-mainbox">
    <div class="flex justify-between jm-mb jm-bg-color p2">
      <div></div>
      <div>
        <jm-form ref="formRef" label-width="auto" :model="ruleForm" :inline="true">
          <jm-form-item label="选择时间：" style="margin:0">
            <!-- <jmp-time-range
              v-model:startTime="ruleForm.creatBeginTime"
              v-model:endTime="ruleForm.createEndTime"
              style="width: 23.75rem"
            /> -->
            <TimeSelect v-model:start-time="ruleForm.creatBeginTime" v-model:end-time="ruleForm.createEndTime">
            </TimeSelect>
          </jm-form-item>
          <jm-form-item label="专题：" prop="topic" style="margin:0">
            <jmp-select v-model="ruleForm.topic" :options="assetOption" style="width: 12.5rem" />
          </jm-form-item>
        </jm-form>
      </div>
    </div>
    <div class="jm-bg-color jm-container">
      <div class="chart-item">
        <div class="chart-name">资产全球影响范围</div>
        <div class="chart-box">
          <Map ref="mapRef" @update="handleUpdate" v-model:select="ruleForm" />
        </div>
      </div>
      <div class="chart-item">
        <div class="chart-name">受影响省份地区TOPN</div>
        <div class="chart-box">
          <Bar ref="barRef" @upBardate="handListupdata" v-model:select="ruleForm" :country="country" />
        </div>
      </div>
      <div class="flex" style="gap: 1.25rem">
        <div class="chart-item">
          <div class="chart-name">设备类型TOP10</div>
          <div class="chart-box">
            <dev-pie ref="devRef" v-model:select="ruleForm" :province="province" />
          </div>
        </div>
        <div class="chart-item">
          <div class="chart-name">产品厂商TOP10</div>
          <div class="chart-box">
            <product-pie ref="productRef" v-model:select="ruleForm" :province="province" />
          </div>
        </div>
        <div class="chart-item">
          <div class="chart-name">端口TOP10</div>
          <div class="chart-box">
            <port-bar ref="portRef" v-model:select="ruleForm" :province="province" />
          </div>
        </div>
        <div class="chart-item">
          <div class="chart-name">服务TOP10</div>
          <div class="chart-box">
            <service-bar ref="serviceRef" v-model:select="ruleForm" :province="province" />
          </div>
        </div>
      </div>
      <div class="chart-item">
        <div class="chart-name">资产分析</div>
        <div class="chart-box">
          <loop-list ref="loopRef" v-model:select="ruleForm" @detailItem="DetailItem" :country="country"
            :province="province" />
        </div>
      </div>
      <!-- 详细页抽屉 -->
      <jm-drawer v-model="drawer" title="I am the title" :with-header="false">
        <looplistdetails v-model:item="LoopValue._item" />
      </jm-drawer>

    </div>
  </div>
</template>
<style lang="scss" scoped src="./mixin/css/index.scss"></style>